<template>
    <div class="login">
        <div class="box">
            <div class="box-header">
                <img :src="baseURL + settingStore.current.logo" alt="">
                <h3>{{ settingStore.current.logo_name }} · 后台管理系统</h3>
            </div>
            <div class="form">
                <el-form :model="form" :rules="rules" ref="ruleFormRef">
                    <el-form-item prop="username">
                        <el-input v-model="form.username" placeholder="请输入账号" :prefix-icon="User"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="form.password" placeholder="请输入密码" :prefix-icon="Lock" show-password></el-input>
                    </el-form-item>

                    <div class="btn">
                        <el-button type="primary" @click="loginHander">登录</el-button>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ElMessage } from 'element-plus';
import { ref, reactive, onMounted } from 'vue'
import { login } from '@/api/api/user'
import { useRouter } from 'vue-router'
import { Lock, User } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/useUser'
import { useSettingStore } from '@/stores/useSetting'
import { baseURL } from '@/config/baseURL'

const ruleFormRef = ref(null)
const router = useRouter()
const userStore = useUserStore()
const settingStore = useSettingStore()


//登录表单
const form = reactive({
    username: '',
    password: ''
})

//登录规则
const rules = {
    account: [
        { required: true, message: '请输入账号', trigger: 'blur' },
        { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' }
    ]
}

//登录方法
const loginHander = () => {

    login({ userinfo: { ...form } }).then(res => {
        if (res.data.code === 200) {
            ElMessage.success(res.data.message)

            //存pinia
            userStore.userinfo = res.data.userinfo
            //存token
            sessionStorage.setItem('token', res.data.userinfo.token)

            //跳转到主页
            router.replace('/main')
        } else {
            ElMessage.error(res.data.message)
        }
    }).catch(err => {
        ElMessage.error(err.message)
    })
}


</script>

<style scoped lang='less'>
.login {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--primary-color);
    display: flex;
    justify-content: center;
    align-items: center;

    .box {
        width: 400px;
        height: 400px;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 2px 3px 8px #00000071;
        padding: 30px 20px;
        box-sizing: border-box;

        &-header {
            text-align: center;

            img {
                width: 100px;
            }

            h3 {
                font-weight: 500;
                margin-top: 10px;
            }
        }

        .form {
            width: 90%;
            margin: 30px auto;

            .btn {
                margin-top: 40px;
                width: 100%;

                button {
                    width: 100%;
                }
            }
        }
    }
}
</style>